{{Template:SZPT-CHINA/head}}
<html>

<head></head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">


<script>
    $(document).ready(function() {
        //document.body.append(document.getElementById('loadImg'))
        //滑动
        //加载适配
        init();
        var loadImg = document.getElementById('loadImg'); //选取id为test的元素
        loadImg.style.display = 'block'; // 隐藏选择的元素
    });


    //BEGIN-loading
    var loadhidekey = 0;

    window.onload = function() {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function() {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);
        init();


        setTimeout(function() {
            //$("#loaderDownId").hide();
            //滑到顶部
            //document.body.scrollTop = document.documentElement.scrollTop = 0;

            $("#directory").hide();
            $("#loadingHome").hide();

            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
                // $("#loading").hide();
        }, 10);




        //


    }

    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function() {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function() {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function() {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function() {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }
        document.getElementById("dir4").onclick = function() {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content4');
            animateScroll(target, 250);
        }
        document.getElementById("dir5").onclick = function() {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content5');
            animateScroll(target, 250);
        }
        document.getElementById("dir6").onclick = function() {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content6');
            animateScroll(target, 250);
        }


    });
    $(window).scroll(function() {

        if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
            $("#directory").show();
        } else {
            $("#directory").hide();
        }

    });
    // 视频加载好
    // function hideLoad() {
    //     console.log("视频加载好了", loadhidekey)

    //     if (loadhidekey == 1) {
    //         setTimeout(function () {
    //             //$("#loaderDownId").hide();
    //             $("#loadingHome").hide();
    //             //$("#loading").hide();
    //         }, 10);
    //     }
    //     else if (loadhidekey == 0) {
    //         loadhidekey = 1;
    //     }
    // }
    //END-loading
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // $("#m1").hover(
        //     function () {
        //         keyPic()
        //         $("#p1").animate({
        //             height: '700px',
        //             width: '650px'
        //         }, 20);
        //         $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");

        //     },
        //     function () {
        //         $("#p1").attr("style", "height: 650px;float: left;");
        //         $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");

        //     }
        // )
        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 33.33333%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:640px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 33.33333%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", pNo);
        $("#bg1").attr("style", bgNo);

        $("#p2").attr("style", p);
        $("#bg2").attr("style", bg);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);


        $("#m1").mouseover(
                function() {
                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);


                    //1
                    $("#p1").attr("style", p);
                    $("#bg1").attr("style", bg);
                },

            ),
            $("#m2").mouseover(
                function() {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);


                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function() {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);


                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),

            $("#m1").click(function() {
                window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Hardware";
            });
        $("#m2").click(function() {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Implementation";
        });
        $("#m3").click(function() {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Proof_Of_Concept";
        });


    });
</script>
<script>
    $(document).ready(function() {
        $("#dir1").hover(function() {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir1").attr("style", value);
        }, function() {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir1").attr("style", value);
        });

        $("#dir2").hover(function() {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir2").attr("style", value);
        }, function() {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir2").attr("style", value);
        });

        $("#dir3").hover(function() {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir3").attr("style", value);
        }, function() {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir3").attr("style", value);
        });
        $("#dir4").hover(function() {
            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir4").attr("style", value);
        }, function() {
            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir4").attr("style", value);
        });
        $("#dir5").hover(function() {
            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir5").attr("style", value);
        }, function() {
            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir5").attr("style", value);
        });
        $("#dir6").hover(function() {
            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir6").attr("style", value);
        }, function() {
            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir6").attr("style", value);
        });



    });
</script>

<body class="pc" id="main">

    <!-- loading -->
    <div id="loadingHome" style=" position: fixed; left: 0px;top: -100px; width: 100%;height:115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg" style=" position: relative; height: 4%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;" src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>
    <div>

        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 33%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/6/60/T--SZPT-CHINA--Implementation-Gardware2.0.png" class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 33%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/8/88/T--SZPT-CHINA--Implementation-Implementation2.0.png" class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 33%;">
                    <image id="p3" src="https://2021.igem.org/wiki/images/d/d5/T--SZPT-CHINA--Implementation-Proof_of_Concept2.0.png" class="smallImg"></image>
                </div>

            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/1/12/T--SZPT-CHINA--implementation-font.png" style="margin-top: -50px;margin-left: 459px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 640px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2" style="width: 640px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 642px;">
                </div>
                <div id="m3" style="width: 640px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1280px;">
                </div>

            </div>

        </div>

        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;text-align: justify;">
            <div id="blue" style="float:left; height: 13000px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 17vw;">
                    <h3 id="dir0p" style="color:#fffea4;padding-left: 10%;font-size:1.8rem;font-family: 'Quicksand', sans-serif;">
                        Implementation</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1" style="color:#ffffff; transition: all 0.3s;width: auto;height: 6vh;margin-top: 3vh;">
                            <p id="dir1p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Overview
                            </p>
                        </div>

                        <div id="dir2" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir2p" style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Users
                            </p>
                        </div>

                        <div id="dir3" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir3p" style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Envisioned usage
                            </p>
                        </div>

                        <div id="dir4" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir4p" style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Benefits
                            </p>
                        </div>


                        <div id="dir5" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir5p" style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Safety
                            </p>
                        </div>


                        <div id="dir6" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir6p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Challenge</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content" style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">

                <div id="content1" class="yj">● Overview
                </div>

                <div class="pb">
                    Our goal is to develop <strong>an engineered live biotherapeutic</strong> to fight with
                    <i>Pseudomonas aeruginosa</i> infection and protect the burn wound simultaneously. We aim to use optogenetically engineered
                    <i>Gluconacetobacter
                        hansenii</i> to synthesize and release antipseudomonal drugs and produce a bacterial cellulose dressing on the burn wound surface to promote burn healing. Either function can be performed independently under
                    dual-light control.
                </div>

                <video src="https://2021.igem.org/wiki/images/6/6b/T--SZPT-CHINA--implement-video-all.mp4" controls style="margin-top: 0px;margin-left: 48px;width: 1000px;"> </video>


                <div class="pb">

                    To implement our project in the real world, we identified our users, designed different product formats, and built our engineering architecture for safety control through integrated human practices.
                </div>


                <image src="https://2021.igem.org/wiki/images/2/22/T--SZPT-CHINA--implement-pic-1.png" class="pic" style="width: 1006px;margin-left: 91px;"> </image>
                <div class="tz">Figure 1. Project framework</div>
                <div id="content2" class="yj">● Users

                </div>

                <image src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--implement-pic-2.png" class="pic" style="margin-left: 101px;width: 1000px;"> </image>

                <div class="tz">Figure 2. Users</div>

                <div id="content3" class="yj">● Envisioned usage</div>

                <div class="ej"><strong>Product formats and methods of use</strong></div>

                <div class="pb">We envisioned two different formats of our products for the engineered live biotherapeutic, that is <strong>bacterial emulsion</strong> and <strong>freeze-dried bacteria</strong>. The two product formats have different storage conditions
                    and shelf life to meet different user needs. (Please click <a href="https://2021.igem.org/Team:SZPT-CHINA/Proof_Of_Concept">Proof of Concept</a> to see the protocols).
                </div>

                <image src="https://2021.igem.org/wiki/images/4/4e/T--SZPT-CHINA--implement-pic-3.png" class="pic" style="margin-left: 223px;width: 700px;"> </image>
                <div class="tz">Figure 3. Proposed product formats</div>


                <div class="pb"><strong>Methods of use</strong> for both products are shown in Figure 4 and Figure 5 respectively.
                </div>

                <image src="https://2021.igem.org/wiki/images/d/d6/T--SZPT-CHINA--implement-pic-4.png" class="pic" style="width: 1000px;margin-left: 67px;"> </image>
                <div class="tz">Figure 4. Method of use for bacterial emulsion</div>

                <image src="https://2021.igem.org/wiki/images/a/a7/T--SZPT-CHINA--implement-pic-5.png" class="pic" style="margin-left: 135px;"> </image>
                <div class="tz">Figure 5. Method of use for freeze-dried bacteria</div>


                <div class="ej"><strong>Usage scenarios</strong> </div>

                <div class="pb"> According to the size of the burn area, we designed two types of lighting device for patients. Through the interview with the firefighters, we learned that they wanted a portable appliance for burn treatment. So, we designed <strong>the portable lighting device</strong>                    for dual light control to be used with our products. This device is suitable for treatment of <strong>small area burns</strong>.
                </div>

                <image src="https://2021.igem.org/wiki/images/b/bf/T--SZPT-CHINA--implement-pic-6.png" class="pic" style="margin-left: 117px;"> </image>
                <div class="tz">Figure 6. Portable light control device for small area burns.

                </div>


                <div class="pb">In order to facilitate the treatment of <strong>large area burns</strong>, we designed an apparatus with an array of LEDs as shown in Figure 7.</div>


                <image src="https://2021.igem.org/wiki/images/a/a1/T--SZPT-CHINA--implement-pic-7.png" class="pic" style="margin-left: 134px;"> </image>
                <div class="tz">Figure 7.The apparatus with an array of LEDs for treatment of large area burns

                </div>

                <div id="content4" class="yj">●Benefits</div>

                <image src="https://2021.igem.org/wiki/images/6/61/T--SZPT-CHINA--implement-pic-8.png" class="pic" style="margin-left: 213px;"> </image>
                <div class="tz">Figure 8. the two-in-one function of our product

                </div>


                <div class="ej"><strong>Protect the burn wound to promote healing</strong></div>

                <div class="pb">The product can produce a bacterial cellulose dressing on the burn wound surface when irradiated with NIR light. This BC dressing <strong>has high mechanical strength, good biocompatibility,
                        maintains a moist
                        environment and act as a barrier to foreign microorganisms.</strong></div>


                <video src="https://2021.igem.org/wiki/images/4/44/T--SZPT-CHINA--hardware-video-red.mp4" controls style="margin-top: 0px;margin-left: 48px;width: 1000px;"> </video>


                <div class="ej"><strong>Kill <i>P. aeruginosa </i>in the burn wound</strong></div>

                <div class="pb">The product can produce a bacterial cellulose dressing on the burn wound surface when irradiated with NIR light. </div>


                <video src="https://2021.igem.org/wiki/images/5/51/T--SZPT-CHINA--hardware-video-blue.mp4" controls style="margin-top: 0px;margin-left: 48px;width: 1000px;"> </video>


                <div id="content5" class="yj">●Safety</div>

                <div class="ej"><strong> Risk of live biotherapeutic</strong></div>
                <div class="pb">
                    In the case of our product usage on the burn wound, translocation of the <i>G. hansenii</i> across the skin barrier might be a safety concern. With respect to the relationship between translocation potential and pathogenicity, two
                    aspects should be addressed: <br><br>(1) the ability to cross skin barrier, and (2) the potential to induce a pathogenic reaction upon passage to the systemic circulation (inflammation or bacteria-mediated organ damage).

                    <br><br>Human commensal bacteria on the skin might be capable of metabolizing the antipseudomonal drugs and/or drug metabolites affecting the pharmacokinetics of the drug, affecting the efficacy and toxicity assessment of drugs.
                </div>


                <div class="ej"><strong> Risk of environmental release: safety module design</strong></div>

                <div class="pb">We designed a safety module that can trigger cell lysis under environmental blue light to reduce the risk of environmental release of our engineered bacteria. (Learn more <a href="https://2021.igem.org/Team:SZPT-CHINA/Design">Design</a>)</div>

                <image src="https://2021.igem.org/wiki/images/a/aa/T--SZPT-CHINA--implement-pic-9.png" class="pic" style="margin-left: 158px;"> </image>
                <div class="tz">Figure 9. Safety and drug release (cell lysis) module
                </div>

                <div id="content6" class="yj">●Challenge</div>

                <div class="ej">Public acceptance</div>
                <div class="pb">
                    The public is concerned about the safety of live bacteria products, and our products may be questioned. Reducing the psychological burden of the public is important.
                </div>
                <div class="ej">Application</div>
                <div class="pb"> It takes a long time for products to come into the market. Research and development → clinical trials → human trials → NDA declaration → clinical testing phase → listing
                </div>



            </div>
            <div id="red" style="float: left;margin-left: 140px; height: 13000px;width: 55px;background-color: #d44225;">
            </div>
        </div>
        <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic" style="margin-top: -372px;width: 1920px;"></image>
    </div>
</body>

<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
            //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style =
            `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function() {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio +
                ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');


            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/13000/, "15000")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/13000/, "15000")
            $("#red").attr("style", value);

            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir1").attr("style", value);
            //margin
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);

            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir3").attr("style", value);

            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir4").attr("style", value);

            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir5").attr("style", value);

            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir6").attr("style", value);



            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir3p").attr("style", value);

            var value = document.getElementById('dir4p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir4p").attr("style", value);

            var value = document.getElementById('dir5p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir5p").attr("style", value);

            var value = document.getElementById('dir6p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir6p").attr("style", value);



            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
            // 是移动设备 展示移动设备页
            //document.getElementById('main').style = 'display:none'
            //document.getElementsByClassName('mobile')[0].style = 'display:flex'
            // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function() {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>